<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="webjars/bootstrap/3.3.7/css/bootstrap.min.css"/>

    <script type="text/javascript" src="/webjars/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="/webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
    <script type="text/javascript" src="/webjars/axios/0.19.0/dist/axios.js"></script>

</head>
<body>
<div id="vueBox">
    <div align="center">

        <table class="table table-hover">
            <h3 class="text-center">房屋信息查询</h3>
            <button type="button" @click="showModal()" >发布房源</button>
            <thead>
            <tr>
                <th>序号</th>
                <th>描述</th>
                <th>户型</th>
                <th>租金</th>
                <th>发布时间</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in houseinfolist.list">
                <td>{{item.houseid}}</td>
                <td>{{item.housedesc}}</td>
                <td><a href="#" @click="getByid(item.houseid)">{{item.typename}}</a></td>
                <td>{{item.mouthiyrent}}</td>
                <td>{{item.publishdate}}</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="text-center">
        <ul class="pagination">
            <li v-show="houseinfolist.hasPreviousPage">
                <a href="#" @click.stop="queryAll(houseinfolist.prePage)">&laquo;</a>
            </li>
            <li :class="{active:houseinfolist.pageNum==i}" v-for="i in houseinfolist.navigatepageNums">
                <a href="#" @click.stop="queryAll(i)">{{i}}</a>
            </li>
            <li v-show="houseinfolist.hasNextPage">
                <a href="#" @click.stop="queryAll(houseinfolist.nextPage)">&raquo;</a>
            </li>
        </ul>
    </div>
    <!-- 添加模态框-->
    <div class="modal fade" id="AddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">添加</h4>
                </div>
                <input type="hidden" />
                <div class="modal-body">
                    房屋描述:<input type="text"  v-model="addhou.housedesc" class="form-group"/>&nbsp;&nbsp;

                    户型:<select v-model="addhou.typeid">
                    <option value="0">全部</option>
                    <option v-for="item in houetypelist" :value="item.typeid">{{item.typename}}</option>
                </select>
                </div>

                <div class="modal-body">
                    租金:<input type="text" v-model="addhou.mouthiyrent" class="form-group"/>&nbsp;&nbsp;
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" @click="hideModal()">关闭</button>
                    <button type="button" v-if="!addhou.houseid" @click="addhoue()" class="btn btn-primary">提交</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    var vm=new Vue({
        el:"#vueBox",
        data:{
            houseinfolist:{},
            houetypelist:{},
            addhou:{housedesc:"",typeid:0,mouthiyrent:""}
        },mounted(){
            this.queryAll();
            axios.post("http://localhost:8080/query/type").then(res=>{this.houetypelist=res.data});
        },methods:{
            queryAll:function (pageNum) {
                axios.get("http://localhost:8080/query/info",{params:{pageNum:pageNum}}).then(res=>{this.houseinfolist=res.data});
            },hideModal:function () {
                $("#AddModal").modal("hide");
            },showModal:function () {
                this.addhou={housedesc:"",typeid:0,mouthiyrent:""}
                $("#AddModal").modal("show");

            },addhoue:function () {
                if (this.addhou.housedesc==""){
                    alert("房屋描述必须填!");
                    this.queryAll();
                    return false;
                }
                if (this.addhou.mouthiyrent==""){
                    alert("租金必须填!");
                    return false;
                }
                axios({url:"http://localhost:8080/add/person",method:"post",params:{housedesc:this.addhou.housedesc,typeid:this.addhou.typeid,mouthiyrent:this.addhou.mouthiyrent}})
                .then(res=>{
                        if (res.data==1){
                            alert("成功!");
                            this.hideModal();
                            this.queryAll(1);
                        }else {
                            alert("失败!");
                        }
                    });
            },getByid:function (houseid) {
                axios.get("http://localhost:8080/queryinfo/by/id",{params: {id:houseid}}).then(
                    res=>{this.addhou=res.data;
                        $("#AddModal").modal("show");
                    })
            }
        }
    });
</script>